<template>
  <div class="app-container">
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="myChart" style="width: 800px;height:500px;"></div>
    <h3>体测结果：{{petInformation.proposal}}</h3>
    <!-- {{list[0].count}} -->
  </div>
</template>

<script>
import petInformation from '@/api/petInformation'
export default {
  name: 'hello',
  data () {
    return {
      petInformation:[],//数据集合
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created() { //在页面渲染之前执行
    //一般调用methods定义的方法，得到数据
       //this.getList()

       //获取路由id值
      //调用接口得到预约信息
      if(this.$route.params && this.$route.params.id) {
         const id = this.$route.params.id
         this.getPetInformation(id)
      } else {
         //表单数据清空
         this.petInformation = []
      }

    },
  mounted(){
    // this.getList();
  },
  methods: {
      //根据id查询
      getPetInformation(id) {
         petInformation.getPetInformation(id) 
            .then(response => {
               this.petInformation = response.data
               console.log(this.petInformation)
               this.drawLine()
            })
      },
    getList(){
            statistics.getStatistics()
            .then(response => { //请求成功response是接口返回数据
            //返回集合赋值list
                this.list = response.data
                this.drawLine()
                //总记录数
                // this.total = response.data.total
                // console.log(response.data)
            })//请求成功
            .catch(error => {//请求失败
                console,log(error)
            })//请求失败
          
        },
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: {
                text: '宠物健康分析图'
            },
            legend: {
                data: ['宠物体检数据', 'Actual Spending']
            },
            radar: {
                // shape: 'circle',
                show: true,
                indicator: [
                { name: '体温', max: 39 },
                { name: '体重', max: 10 },
                { name: '饭量', max: 5 },
                { name: '心率', max: 105 },
                { name: '排便次数', max: 5 },
                { name: '血压', max: 180 }
                ]
            },
            series: [
                {
                name: 'Budget vs spending',
                type: 'radar',
                show: true,
                data: [
                    {
                    value: [this.petInformation.temperature,
                      this.petInformation.weight,
                       this.petInformation.appetite,
                        this.petInformation.heartRate,
                         this.petInformation.defecationTimes,
                         this.petInformation.bloodPressure],
                    name: '宠物体检数据',
                    areaStyle: {//显示颜色
                        color: 'rgba(255, 228, 52, 0.6)'
                    },

                     label: {//显示数值
                    normal: {
                        show: true,
                        formatter:function(params) {
                            return params.value;
                        }
                    }
                }
                    },
                    // {
                    // value: [1, 1, 1, 1, 1, 1],
                    // name: 'Actual Spending'
                    // }
                ]
                }
            ]
        });
    }
  }
}
</script>

<style>

</style>